<template>
  <div id="app">
    <h1>欢迎来到星光书城</h1>
    <h2 id="store">starbookstore.com</h2>
    <div style="opacity: 0.85;font-weight: bold">
      <el-card style="width: 600px;height: 400px;margin: 0 auto;">
        <!--label-width设置用户名这一列所占的宽度,如果不设置会显示在上面-->
        <el-form label-width="60px" style="width: 400px;margin: 50px auto">
          <el-menu default-active="activeIndex" class="el-menu-demo"
                   mode="horizontal" style="margin-left: 67px" @select="handleSelect">
            <el-menu-item index="1">用户名密码登录</el-menu-item>
            <el-menu-item index="2">手机验证码登录</el-menu-item>
          </el-menu>
          <div v-if="currentIndex=='1'">
            <el-form-item label="用户名:">
              <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
              <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </div>

          <div v-if="currentIndex=='2'">
            <el-form-item label="手机号:">
              <el-input type="text" v-model="user.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="验证码:">
              <el-col :span="9">
                <el-input type="text" v-model="verificationCode" placeholder="请输入验证码"></el-input>
              </el-col>
              <el-button style="position: relative;right: 20px" type="success" plain @click="login()">获取验证码</el-button>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button style="position: relative;right: 30px" type="success" plain @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

  </div>
</template>
<script>
export default {
  name:'login',
  data() {
    return {
      currentIndex:"2",
      user:{
        username:"",
        password:"",
        phone:""
      },
      verificationCode:""
    }
  },
  methods:{
    login(){
      axios.post("/user/login",true.user).then(function (response) {
        if (response.data==1){
          alert("登录成功")
          location.href = '/'
        }else if (response.data==2){
          alert("密码错误,请重新输入")
        }else {
          alert("用户名错误,请重新输入")
        }
      })
    },
    handleSelect(key){
      this.currentIndex=key;
    }
  }
}
</script>
<style>
body{
  margin: 0;/*去掉外边距*/
  text-align: center;/*页面内部的文本居中*/
  background-image: url("@/assets/imgs/reg_img.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
